<template>
  <transition name="slideInRight">
    <div class="travels-list-wrapper">
      <v-header title="看游记" ref="header">
        <x-icon slot="right" @click="showSearch = true" type="ios-search-strong" size="28" style="fill:#fff;"></x-icon>
      </v-header>

      <div ref="main" class="main" :style="{height: mainHeight + 'px'}">
        <ul class="travels">
            <router-link tag="li" v-for="item in travelsList" :key="item.id" class="item" :to="`/address/travels/${item.id}`">
              <div class="left" v-lazy:backgroundImage="item.firstImg"></div>
              <div class="right">
                <p class="travels-title">{{item.title}}</p>
                <div class="bottom">
                  <p class="userinfo">
                    <img class="avatar" v-lazy="item.userHeadUrl" @click.stop="toUSerDetail(item.publishUserId)" />
                    <span class="nickname">{{item.userName}}</span>
                  </p>
                  <p class="number">
                    <span><i class="icon iconfont icon-brower-count" style="font-size: 13px"/>{{item.browseCount}}</span>
                    <span><i class="icon iconfont icon-comment-count" style="font-size: 11px"/>{{item.commentCount}}</span>
                  </p>
                </div>
              </div>
            </router-link>
          </ul>
          <p v-show="travelsList.length > 0"  :style="{paddingBottom: paddingBottom + 'px'}" style="height: 44px; line-height: 44px; font-size: 13px; color: #999; text-align: center;">
          {{loadState == 'nomore' ? '~· 没有更多啦 ·~' : '正在加载...'}}</p>
      </div>

      <!-- 搜索 -->
      <global-search v-model="showSearch" type="strategy" :range="[4, 5]"></global-search>

      <div ref="plus" class="plus" @click="clickPlus" :style="{bottom: paddingBottom + 50 + 'px'}">
        <x-icon class="icon" type="ios-plus-empty" size="32"></x-icon>
      </div>
    </div>
  </transition>
</template>

<script>
import VHeader from '@/components/v-header/v-header'
import Scroll from '@/components/scroll/scroll'
import GlobalSearch from '@/components/global-search/global-search'
import { TransferDom, Popup } from 'vux'

import animations from 'create-keyframe-animation'
import { isIphoneX } from '@/assets/js/brower'
import { localUser } from '@/assets/js/local'
import axios from '@/api/axiosApi'
import defaultAvatar from '@/assets/img/default_avatar.png'
import youjiIcon from '@/assets/img/icon/youji.png'
import gonglueIcon from '@/assets/img/icon/gonglue.png'
import { handleBackMixin, statusBarMixin } from '@/assets/js/mixin'
import { QINIU_PREFIX } from '@/api/config'
import { on } from '@/assets/js/dom'

export default {
  name: 'StrategyList',
  mixins: [handleBackMixin, statusBarMixin],
  data() {
    return {
      youjiIcon,
      gonglueIcon,
      statusBarColor: 'white',
      showSearch: false,
      loadState: 'normal',
      defaultAvatar,
      seachValue: '',
      searchList: [],
      travelsList: [],
      allPopupModels: ['showSearch']
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      const scrollTop = vm.$store.getters.scrollTop
      if (vm.$refs.main && scrollTop.TravelsList) {
        vm.$refs.main.scrollTop = scrollTop.TravelsList
      }
    })
  },
  beforeRouteLeave (to, from, next) {
    this.$store.commit('SET_SCROLL_TOP', {TravelsList: this.$refs.main.scrollTop})
    next()
  },
  directives: {
    TransferDom
  },
  components: {
    VHeader,
    Scroll,
    Popup,
    GlobalSearch
  },
  created() {
    this.paddingTop = 24
    this.paddingBottom = 0
    if (isIphoneX()) {
      this.paddingTop = 34
      this.paddingBottom = 24
    }
    this.mainHeight = window.innerHeight - 40 - this.paddingTop

    this.pageNum = 1

    animations.registerAnimation({
      name: 'rotateOut',
      animation: [
        {
          transform: 'translate(-50%, 0)'
        },
        {
          transform: 'translate(-50%, ' + (this.paddingBottom + 100) + 'px)'
        }
      ],
      presets: {
        duration: 800,
        resetWhenDone: true
      }
    })
    animations.registerAnimation({
      name: 'rotateIn',
      animation: [
        {
          transform: 'translate(-50%, ' + (this.paddingBottom + 100) + 'px)'
        },
        {
          transform: 'translate(-50%, 0)'
        }
      ],
      presets: {
        duration: 800,
        resetWhenDone: true
      }
    })

    this._getPlayStrategList()
  },
  mounted() {
    this.scrollTop = 0
    this.showPlus = true
    on(this.$refs.main, 'scroll', (e) => {
      const scrollTop = this.$refs.main.scrollTop
      const wrapperHeight = this.$refs.main.clientHeight
      const wrapperScroll = this.$refs.main.scrollHeight
      if (this.showPlus && scrollTop > this.scrollTop) {
        animations.runAnimation(this.$refs.plus, 'rotateOut', () => {
          this.showPlus = false
        })
      } else if (!this.showPlus && scrollTop < this.scrollTop) {
        animations.runAnimation(this.$refs.plus, 'rotateIn', () => {
          this.showPlus = true
        })
      }
      if (this.loadState === 'normal' && wrapperScroll > wrapperHeight && (scrollTop + wrapperHeight + 1) >= (wrapperScroll - 44)) {
        this.pageNum++
        this._getPlayStrategList()
      }
      this.scrollTop = scrollTop
    })
  },
  methods: {
    _getPlayStrategList() {
      this.loadState = 'load'
      const _self = this
      axios.get(
        this,
        '/v1/playStrategy',
        {
          pageNum: this.pageNum,
          articleType: 0
        },
        data => {
          if (data.length === 0) {
            if (_self.pageNum > 0) {
              _self.loadState = 'nomore'
              if (_self.$refs.scroll) {
                _self.pageNum--
                _self.$refs.scroll.hiddenPullUpLoad()
              }
            } else {
              _self.$refs.scroll.hiddenPullDown()
            }
            return
          }
          data.forEach(item => {
            if (item.userHeadUrl) {
              if (item.userHeadUrl.indexOf(QINIU_PREFIX) > -1) {
                item.userHeadUrl += '-bheader'
              }
            } else {
              item.userHeadUrl = defaultAvatar
            }
            if (item.firstImg && item.firstImg.indexOf(QINIU_PREFIX) > -1) {
              item.firstImg += '-w200'
            }
          })
          if (_self.pageNum <= 1) {
            _self.travelsList = data
          } else {
            _self.travelsList = _self.travelsList.concat(data)
          }
          _self.$nextTick(() => {
            _self.loadState = 'normal'
          })
        },
        () => {
          _self.loadState = 'normal'
        }
      )
    },
    toDetail(id, type) {
      this.$router.push('/address/travels/' + id)
    },
    clickPlus() {
      const user = localUser.get()
      if (user == null || user.id == null) {
        this.$router.push('/login')
        return
      }
      this.$router.push(`/address/travelsEdit/0`)
    }
  }
}
</script>

<style lang="stylus" scoped>
@import '~@/assets/css/variable.styl'

.travels-list-wrapper
  position fixed
  top 0
  left 0
  right 0
  bottom 0px
  background-color $color-background
  z-index 102
  .travels
    padding 16px
    background #fff
    li
      padding 16px 0
      border-bottom 1px solid rgba(0, 0, 0, 0.1)
      display flex
      justify-content space-between
      &:first-child
        padding-top 0
      &:last-child
        border-bottom none
        padding-bottom 0
      .left
        width 44%
        height 117px
        border-radius 3px
        background-size cover
        background-repeat no-repeat
        background-position center
      .right
        width calc(56% - 12px)
        height 117px
        display flex
        align-content space-between
        flex-wrap wrap
      .travels-title
        font-size 15px
        color #333
        line-height 1.4
        no-wrap-n(2)
        width 100%
      .userinfo
        display flex
        align-content space-between
        height 24px
        margin-bottom 8px
        line-height 24px
      .avatar
        width 24px
        height 24px
        border-radius 50%
        margin-right 4px
      .nickname
        font-size 11px
        color #333
      .bottom
        width 100%
      .number
        color #666
        font-size 11px
        line-height 1
        span
          margin-right 8px
        i
          margin-right 4px
  .main
    overflow-x hidden
    overflow-y auto
    -webkit-overflow-scrolling touch
    -webkit-box-sizing border-box
  .plus
    position absolute
    bottom 75px
    left 50%
    transform translateX(-50%)
    text-align center
    z-index 201
    width 40px
    height 40px
    line-height 40px
    border-radius 50%
    background $color-theme
    display inline-block
    box-shadow 0 0 8px $color-theme
    .icon
      fill #fff
      margin-top 5px
.popup-wrapper
  background #fff
  .select-type
    .row
      display flex
      justify-content space-around
      .item
        width 100px
        text-align center
        margin-bottom 12px
        img
          width 50px
          height 50px
        p
          margin-top -5px
  .search-list
    padding 15px
    list-style none
    line-height 1.6
    li
      border-bottom 1px solid $color-border
      padding 5px 0
      display flex
      justify-content space-between
      align-items center
    .name
      font-weight bold
      width calc(100% - 55px)
    .travels-type
      width 40px
      font-size $font-size-small
      padding 3px 0
      text-align center
      border-radius 2px
      line-height 1
      border 1px solid $color-theme-1
      color $color-theme-1
    .primary
      border 1px solid $color-theme
      color $color-theme
</style>
